<template>
  <div class="navhead" v-if="isNavHead">
    <div class="main">
      <div class="logo fl">
        <h1>DogQiu</h1>
      </div>
      <ul class="fl nav">
        <li><router-link to="/index" tag="a">首页</router-link></li>
        <li><router-link to="/design" tag="a">设计作品</router-link></li>
        <li><router-link to="/quesetion" tag="a">问答</router-link></li>
        <li><router-link to="/share" tag="a">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</router-link></li>
        <li><router-link to="/about" tag="a"> &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</router-link></li>
      </ul>
      <ul class="right fl">
        <li><input type="search" placeholder="search"><span class="iconfont search">&#xe6ac;</span></li>
        <li v-bind:class="{article:!isLoging,isarticle:isLoging}"  v-on:mouseenter="relaseopen" v-on:mouseleave="relaseclose">
          <button>
            <i class="iconfont" v-if="!isLoging">&#xe618;</i>
            发布
            <i class="iconfont" v-if='isLoging'>&#xe791;</i>
            <ul class="down_box" v-if="isLoging" v-bind:class="{up_box:isClass}">
              <router-link to="/release/article/editor" tag="a"><li><i class="iconfont">&#xe608;</i>文章</li></router-link>
              <router-link to="/release/work" tag="a"><li><i class="iconfont">&#xe639;</i>设计作品</li></router-link>
            </ul>
          </button>
        </li>
        <li class="login pointer" v-if="!isLoging"><span v-on:click="openLogin">登录</span><span class="register pointer" v-on:click="openRegistered">注册</span></li>
        <li v-else class="person" v-on:mouseenter="personopen" v-on:mouseleave="personclose">
            <span class="iconfont bule notice">&#xe62a;</span>
            <router-link to="/personal">
            <div class="header_img" v-if="headerImg">
              <img v-bind:src="headerImg|filterHeader" alt="">
            </div>
            <span class="person_icon" v-else><i class="iconfont">&#xe638;</i></span>
          </router-link>
          <ul class="person_nav" v-bind:class="{up_box:isPerson}">
            <li><router-link to="/personal/" tag="a"><i class="iconfont">&#xe62c;</i>我的主页</router-link></li>
            <li><router-link to="/personal/articles"  tag="a"><i class="iconfont">&#xe652;</i>我的文章</router-link></li>
            <li><router-link to="/personal/designs"  tag="a"><i class="iconfont">&#xe639;</i>我的设计</router-link></li>
            <li><router-link to="/personal/collections"  tag="a"><i class="iconfont">&#xe667;</i>我的收藏</router-link></li>
            <li><router-link to="/personal/collections " tag="a"><i class="iconfont">&#xe645;</i>我喜欢的</router-link></li>
            <li><router-link to="/personal/comments" tag="a"><i class="iconfont">&#xe62b;</i>我的评论</router-link></li>
            <li><router-link to="/setup/personalData" tag="a"><i class="iconfont">&#xe63e;</i>设置</router-link></li>
            <li v-on:click="logOut" tag="a"><i class="iconfont">&#xe658;</i>退出</li>
          </ul>
        </li>
      </ul>
      </div>
  </div>
</template>

<script>
import axios from "axios"
import filterHeader from '../assets/js/filterHeaderImg.js'
export default {
  name: "NavHead",
  data() {
    return {
      isClass: true,
      isPerson: true
    }
  },
  computed: {
    isLoging: function() {
      return this.$store.state.isLoging;
    },
    isNavHead: function() {
      return this.$store.state.isNavHead;
    },
    headerImg:function(){
      return this.$store.state.headerImg;
    }
  },
  methods: {
    openLogin: function() {
      this.$store.commit("LOGINBOX", true);
    },
    openRegistered: function() {
      this.$store.commit("ISREGISBOX", true);
    },
    relaseopen: function() {
      this.isClass = false;
    },
    relaseclose: function() {
      this.isClass = true;
    },    
    personopen: function() {
      this.isPerson = false;
    },
    personclose: function() {
      this.isPerson = true;
    },
    // 退出
    logOut: function() {  
      var that = this    
      axios.get('/api/logout').then(function(response){
        if(response.data.state==='1'){
          that.$store.commit('ISLOGING',false);
          that.$store.commit('USERID','');
          that.$store.commit('USERNAME',"")
        }
      }).catch(function(err){
        console.log(err)
      })
    }
  },
  filters:{
      filterHeader:filterHeader
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style src="../assets/css/navhead.scss" lang="scss">

</style>
